<template>
  <div class="upload-box">
    <el-space
      size="large"
      direction="vertical"
      style="width: 100%"
      alignment="flex-start"
      fill
    >
      <!-- 操作按钮 -->
      <el-space size="large" direction="horizontal" alignment="flex-start">
        <el-button type="primary">修改评分</el-button>
        <el-button>导出数据</el-button>
      </el-space>
      <!-- 操作按钮 -->
      <!-- 项目简介 -->
      <div v-if="detailData.baseInfo" class="project-title">
        <div class="item">
          <span class="label">评分记录ID：</span>
          <span>{{ detailData.baseInfo.id }}</span>
        </div>
        <div class="item">
          <span class="label">记录创建人：</span>
          <span>{{ detailData.topicScoreRespVO.creatorName }}</span>
        </div>
        <div class="item">
          <span class="label">记录创建时间：</span>
          <span>
            {{
              $XEUtils.toDateString(
                detailData.baseInfo.createTime,
                'yyyy-MM-dd HH:mm:ss'
              )
            }}
          </span>
        </div>
      </div>
      <!-- 项目简介 -->
      <!-- 项目信息 -->
      <div v-if="detailData.projectInfo" class="box" style="width: 100%">
        <el-space
          size="large"
          direction="vertical"
          style="width: 100%"
          alignment="flex-start"
          fill
        >
          <div class="common-title">
            <img src="@/assets/project_images/icon2.png" alt="" class="icon" />
            <span>项目信息</span>
          </div>
          <vxe-table
            align="left"
            :data="[detailData.projectInfo]"
            size="small"
            border
            min-height="0"
          >
            <vxe-column field="projectCode" title="项目编号" />
            <vxe-column field="projectName" title="项目名称" />
            <vxe-column field="projectLevel" title="项目级别">
              <template #default="{ row }">
                {{
                  dictStore.getDictLabelForValue(
                    'project_level',
                    row.projectLevel
                  )
                }}
              </template>
            </vxe-column>
            <vxe-column field="projectTypeName" title="项目类型" />
            <vxe-column field="keyProject" title="是否重点项目">
              <template #default="{ row }">
                {{ dictStore.getDictLabelForValue('yes_no', row.keyProject) }}
              </template>
            </vxe-column>
            <vxe-column field="headerName" title="项目负责人" />
          </vxe-table>
        </el-space>
      </div>
      <!-- 项目信息 -->
      <!-- 课题信息 -->
      <div v-if="detailData.topicInfo" class="box">
        <el-space
          size="large"
          direction="vertical"
          style="width: 100%"
          alignment="flex-start"
          fill
        >
          <div class="common-title">
            <img src="@/assets/project_images/icon2.png" alt="" class="icon" />
            <span>课题信息</span>
          </div>
          <vxe-table
            align="left"
            :data="[detailData.topicInfo]"
            size="small"
            border
            min-height="0"
          >
            <vxe-column field="id" title="课题编号" />
            <vxe-column field="name" title="课程名称" />
            <vxe-column field="leader" title="课题负责人" />
            <vxe-column field="type" title="课题类型">
              <template #default="{ row }">
                {{ dictStore.getDictLabelForValue('topic_type', row.type) }}
              </template>
            </vxe-column>
            <vxe-column field="subjectAreaText" title="专业领域" />
            <vxe-column
              field="researchStartDate"
              title="研究开始时间"
              :formatter="['formatDate', 'yyyy-MM-dd HH:mm:ss']"
            />
            <vxe-column
              field="researchEndDate"
              title="研究结束时间"
              :formatter="['formatDate', 'yyyy-MM-dd HH:mm:ss']"
            />
            <vxe-column field="estimatedBudget" title="预计投入经费（万元）" />
            <vxe-column
              field="externalCooperationRequired"
              title="是否需要外协"
            >
              <template #default="{ row }">
                {{
                  dictStore.getDictLabelForValue(
                    'yes_no',
                    row.externalCooperationRequired
                  )
                }}
              </template>
            </vxe-column>
            <vxe-column field="leadingUnitName" title="承担单位" />
            <vxe-column field="collaboratingUnitNames" title="协作单位" />
          </vxe-table>
        </el-space>
      </div>
      <!-- 课题信息 -->
      <!-- 其他信息 -->
      <div v-if="detailData.topicScoreRespVO" class="box">
        <el-space
          size="large"
          direction="vertical"
          style="width: 100%"
          alignment="flex-start"
          fill
        >
          <div class="common-title">
            <img src="@/assets/project_images/icon4.png" alt="" class="icon" />
            <span>其他信息</span>
          </div>
          <vxe-table
            align="left"
            :data="[detailData.topicScoreRespVO]"
            size="small"
            border
            min-height="0"
          >
            <vxe-column field="creatorDepName" title="上报单位" />
            <vxe-column field="creatorName" title="上报人" />
          </vxe-table>
        </el-space>
      </div>
      <!-- 其他信息 -->

      <el-form style="max-width: 800px; margin-top: 40px" label-width="auto">
        <el-form-item label="研究内容得分：">
          <el-input-number v-model="ruleForm.contentScore" />
        </el-form-item>
        <el-form-item label="阶段目标得分：">
          <el-input-number v-model="ruleForm.stageScore" />
        </el-form-item>
        <el-form-item label="总得分：">
          <el-input-number
            :model-value="ruleForm.contentScore + ruleForm.stageScore"
            disabled
          />
        </el-form-item>
        <el-form-item label="备注：">
          <el-input v-model="ruleForm.remark" type="textarea" />
        </el-form-item>
      </el-form>
    </el-space>
  </div>

  <commonFooterBar>
    <el-button type="primary" :loading="loading" @click="submitForm()">
      确认提交
    </el-button>
  </commonFooterBar>
</template>

<script setup>
  import { useDictStore } from '@/store/modules/dict'
  import commonFooterBar from '@/components/commonFooterBar.vue'
  import { projectScoreUpdate } from '@/api/project/course/score'
  import { useCloseTabNavigate } from '@/utils/useCloseTabNavigate'

  const { closeTabNavigate } = useCloseTabNavigate()

  const $baseMessage = inject('$baseMessage')

  const props = defineProps({
    detailData: {
      type: Object,
      default: () => {},
    },
  })

  watch(
    () => props.detailData.topicScoreRespVO,
    (value) => {
      ruleForm.contentScore = value.contentScore
      ruleForm.stageScore = value.stageScore
      ruleForm.remark = value.remark
    }
  )

  const ruleForm = reactive({
    contentScore: 0,
    stageScore: 0,
    remark: '',
  })

  const dictStore = useDictStore()

  const loading = ref(false)

  const submitForm = () => {
    for (const key in ruleForm) {
      if (ruleForm[key] == '') {
        $baseMessage('请填写完整的评分信息', 'error')
        return false
      }
    }

    const params = {
      topicScoreId: props.detailData.baseInfo.id,
      ...ruleForm,
      totalScore: ruleForm.contentScore + ruleForm.stageScore,
    }

    projectScoreUpdate(params)
      .then((res) => {
        if (res.code == 0 || res.code == 200) {
          $baseMessage('修改成功')
          closeTabNavigate()
        }
      })
      .finally(() => {
        loading.value = false
      })
  }
</script>

<style lang="scss" scoped>
  .upload-box {
    padding-bottom: 80px !important;
  }
  .project-title {
    display: flex;
    align-items: center;
    width: 100%;
    min-height: 28px;
    padding: 10px;
    background: var(--vxe-table-header-background-color);

    .item {
      display: inline-flex;
      margin-right: 90px;
      font-size: $base-font-size-default;

      .label {
        color: $base-color-text-secondary;
      }
    }
  }

  .box {
    .common-title {
      display: flex;
      align-items: center;
      font-size: $base-font-size-default;
      font-weight: bold;
      color: $base-color-text-primary;

      .icon {
        margin-right: 10px;
      }
    }

    .sub-title {
      font-size: $base-font-size-small;
      font-weight: bold;
    }
  }
</style>
